<template>
	<view class="login_block">
		<view class="login_img">
			<image style="width: 64px;height: 64px;" src="../../static/login.png" mode=""></image>
		</view>
		<view class="index_block">
			<input type="text" v-model="user.userName" class="name_input" placeholder="请输入账号"/>
			<input type="password" v-model="user.userPassword" class="password_input" placeholder="请输入密码"/>
		</view>
		<view class="btn_block">
			<button @click="goMe" size="mini">登录</button>
			<button @click="back" size="mini">返回</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					userName: "",
					userPassword: "",
				},
			};
		},
		methods: {
			// 跳转到我的模块
			goMe(user) {
				if (this.user.userName != "" && this.user.userPassword != "") {
					this.$store.commit("login", user);
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.showModal({
						title: "请输入完整信息",
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/login",
									animationType: "none",
								});
							}
						},
					});
				}
			},
			back() {
				this.$store.commit("logout");
				uni.navigateBack({
					delta: 1
				})
			},
		},
	};
</script>

<style scoped>
	.login_block {
		width: 100%;
		height: 100%;
	}
	
	.login_img {
		display: flex;
		justify-content: center;
		margin-top: 160rpx;
	}
	
	.index_block {
		padding-top: 60rpx;
	}

	.name_input, .password_input {
		width: 60%;
		border: 1px solid dimgray;
		border-radius: 10rpx;
		color: #000000;
		margin: auto;
		font-size: 28rpx;
		padding: 10rpx 30rpx 10rpx 20rpx;
		margin-top: 20rpx;
	}
	
	.btn_block {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	
</style>
<style>
	page {
		height: 100%;
		width: 100%;
		background-color: #F2F2F2;
	}
</style>
